<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>酒店预订</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-title" content="酒店预订"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="{php echo $this->_css_url}css.css" rel="stylesheet"/>
    <link rel="Stylesheet" type="text/css" href="{php echo $this->_css_url}mian.css">
    <script language='javascript' src='{php echo $this->_script_url}jquery.js'></script>
    <script language='javascript' src='{php echo $this->_script_url}common.js'></script>
    <script language='javascript' src='{php echo $this->_script_url}jquery.form.js'></script>
    <!--<script type="application/x-javascript">addEventListener('DOMContentLoaded', function () {-->
        <!--setTimeout(function () {-->
            <!--scrollTo(0, 1);-->
        <!--}, 0);-->
    <!--}, false);</script>-->
    <style type="text/css">html, body, #main-content {
        height: 100%;
    }

    .h100 {
        height: 88%;
        height: -moz-calc(100% - 93px);
        height: -webkit-calc(100% - 93px);
        height: calc(100% - 93px);
    }

    .cui-form-select {
        height: 38px;
        line-height: 38px;
    }

    .sleBG {
        height: 38px;
        line-height: 38px;
    }

    .novip {
        font-size: 14px;
        padding-bottom: 5px;
    }

    #orderinfo .ui-grid-a, #checkin-name li {
        height: 38px;
        position: relative;
    }

    #orderinfo .ui-grid-a .ui-block-a {
        width: 25%;
        line-height: 38px;
        padding-left: 10px;
    }

    #orderinfo .ui-grid-a .ui-block-b {
        width: 75%;
    }

    input.ui-input-text {
        width: 90%;
    }

    #orderinfo #checkin-name {
        height: auto;
    }

    #orderinfo #pay-info {
        height: auto;
    }

    #pay-info p {
        text-align: center;
        padding: 5px;
    }

    #disabled {
        display: none;
    }

    .ui-li-count {
        display: none !important;
    }

    .ui-bar-c {
        height: 40px;
    }

    .ui-selectmenu .ui-title {
        display: none;
    }

    #remark {
    }

    .guarantee {
        display: none;
        background-color: #FFF1D5;
        height: 35px;
        padding: 10px;
        color: #666666;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .room_num {
        top: 3px;
        right: 5px;
    }

    .paybtn-box {
        height: 45px;
        width: 100%;
    }

    /*.paybtn{position: fixed;left: 0px;bottom: 0px;} */
    .jsH_ydwxcs {
        position: relative !important;
    }

    .jsH {
        /*position:fixed;*/
        z-index: 9999;
    }

    #paytype_div {
        position: absolute; width: 100%; height:100%; left: 0px; top: 0px; z-index: 16531; display: none;
    }

    .pay-info {margin-left: 30px;}

</style>

</head>

<body id="ctripPage" style='padding-bottom:40px;'>
    <div id="main-content">
        <section id="ydwxcsH"></section>
        <header>
            <h1 class="hoteltitle">酒店预订</h1>

            <div class="lefthead" onClick="location.href='javascript:history.back();'">
                <div class="header_return"></div>
            </div>
            <div class="righthead">
                <a class="header_tel __hreftel__" href="tel:{$tel}"></a>
                <a id="imgHome" class="header_home" href="{php echo $this->createMobileUrl('index')}">&nbsp;</a>
                <a class="header_order" href="{php echo $this->createMobileUrl('orderlist')}">&nbsp;</a>
            </div>
        </header>
        <form name="form1" method="POST" action="" id='data_form'>
            <div class="h100">
                <div class="jsM"></div>
                <div class="novip" style="display: block;">
                </div>
                <div class="conlist">
                    <div style="line-height: 25px;" id="des">
                        <div><span class="bold size16">{$reply['title']}</span></div>
                        <div>{$room['title']}</div>
                        <div>
                            <span class="bold">{$search_array['bdate']}&nbsp;至&nbsp;{$search_array['edate']}</span>
                            <span class="bold span2 inday">共{$search_array['day']}晚</span>
                        </div>
                        <div class="gray size12 bold spantop" id="show_room_num" style="color: red;display: none;">
                            {if $list}{$list['date']}当天还有{$list['num']}间空房,您的最大预定数量为{$list['num']}间{else}您的最大预定数量为{$max_room}间{/if}
                        </div>
                    </div>
                </div>
                <div style="padding: 0px 10px">
                    <div class="conlist">
                        <div id="orderinfo">
                            <div class="ui-txt">
                                <div class="ui-grid-a">
                                    <div class="ui-block-a">预订数量</div>
                                    <div class="ui-block-b">
                                        <div class="room_num" data-count="8" style="margin-top:0px;">
                                            <i class="list_num_dec num_invalid">-</i>
                                            <span class="list_num">1</span>
                                            <i class="list_num_inc">+</i></div>
                                    </div>
                                </div>
                            </div>
                            <div id="checkin-name">
                                <div class="ui-txt clear-input-box" data-d="1">
                                    <input type="text" id="uname" name="uname" value="{$realname}" required="required" data-lid="0" class="checkin-name" placeholder="入住人（必填）">
                                    <a class="clear-input " href="javascript:;" style="display: none;"><span></span></a>
                                </div>
                            </div>
                            <div class="ui-txt clear-input-box">
                                <input type="text" data-contact="contact_name" id="contact_name" name="contact_name" value="{$realname}" required="required" placeholder="联系人（必填）">
                                <a class="clear-input " href="javascript:;" style="display: none;"><span></span></a>
                            </div>
                            <div class="ui-txt clear-input-box">
                                <input type="tel" data-contact="contact-tel" id="mobile" name="mobile" placeholder="手机号（必填）" required="required" value="{$mobile}" maxlength="11">
                                <a class="clear-input " href="javascript:;" style="display: none;"><span></span></a>
                            </div>

                            <div class="ui-txt" id="btn_paytype">
                                <div class="ui-grid-a">
                                    <div class="ui-block-a">
                                        {if empty($this->_set_info['paytype1']) && empty($this->_set_info['paytype2'])}
                                        <span id='paytype_name'>在线预订</span>
                                        <input type="hidden" name="paytype" id="paytype" value='3'/>
                                        {else}
                                        <span id='paytype_name'>支付方式</span>
                                        <input type="hidden" name="paytype" id="paytype"/>
                                        {/if}
                                    </div>
                                </div>
                            </div>
	                        <h5>留言</h5>
	                        <div class="message-box">
		                        <textarea class="form-control" rows="3" name="remark" placeholder="亲，还用什么能帮助到您吗？就写到这里吧！"></textarea>
	                        </div>
                            <p id="notice" class="orange size12">
                            </p>
                        </div>
                    </div>
                </div>
                <div class="xfqbox white_li" style="display: none">
                    <span class="coupon checkno" data-select="0"></span>使用消费券
                    <span class="amont"></span>元
                    <a href="../Market/hotxfq.html">消费券使用说明&gt;</a>
                </div>
                <div class="paybtn-box">
                    <div class="ui-grid-a paybtn">
                        <div class="ui-block-a">应付总价：<dfn class="fff">¥</dfn>
                            <strong class="size20 fff" id="price">{$price}</strong></div>
                        <div id="button" class="ui-block-b">
                            <strong id="data_submit">提交订单</strong></div>
                        <div id="orderAlert" class="ui-block-b" style="display: none;">
                            <strong>请稍候...</strong></div>
                    </div>
                </div>

            </div>

            <div class="cui-select-float-box cui-form-select-float" tabindex="1" id="paytype_div">
                <div class="cui-select-head">
                    <div class="cui-select-close">关闭</div>
                    <div class="cui-select-title">选择支付方式</div>
                </div>
                <div class="cui-select-cont-box" style="height:100%;background:#fff">
                    {if $this->_set_info['paytype1'] == 1 && !empty($_W['account']['payment']['credit']['switch'])}
                    <div class="cui-select-option cui-option-over" data-value="1" data-name='余额支付'>
                        <b>余额支付</b>
                        <span class="pay-info">会员卡余额支付</span>
                    </div>
                    {/if}
                    {if $this->_set_info['paytype2'] == 21 && !empty($_W['account']['payment']['wechat']['switch'])}
                    <div class="cui-select-option cui-option-over" data-value="21" data-name='微支付'>
                        <b>微信支付</b>
                        <span class="pay-info">每笔最高1万, 每日限额1万</span>
                    </div>
                    {/if}
                    {if $this->_set_info['paytype2'] == 22 && !empty($_W['account']['payment']['alipay']['switch'])}
                    <div class="cui-select-option cui-option-over" data-value="22" data-name='支付宝'>
                        <b style="margin-right: 15px;">支付宝</b>
                        <span class="pay-info">每笔最高3万, 每日限额5万</span>
                    </div>
                    {/if}
                    {if $this->_set_info['paytype2'] == 23 && !empty($_W['account']['payment']['alipay']['switch']) &&!empty($_W['account']['payment']['wechat']['switch'])}
                    <div class="cui-select-option cui-option-over" data-value="21" data-name='微支付'>
                        <b>微信支付</b>
                        <span class="pay-info">每笔最高1万, 每日限额1万</span>
                    </div>
                    <div class="cui-select-option cui-option-over" data-value="22" data-name='支付宝'>
                        <b style="margin-right: 15px;">支付宝</b>
                        <span class="pay-info">每笔最高3万, 每日限额5万</span>
                    </div>
                    {/if}
                    {if $this->_set_info['paytype3'] == 1}
                    <div class="cui-select-option cui-option-over" data-value="3" data-name='到店支付'>
                        <b>到店支付</b>
                        <span class="pay-info">入住时支付</span>
                    </div>
                    {/if}
                </div>
            </div>

            <input type="hidden" name="nums" id="nums" value="1"/>
            <input type="hidden" name="submit" value="1"/>
            <input type="hidden" name="token" value="{$_W['token']}"/>
        </form>

        <input type="hidden" id="page_id" value="212098">
    </div>

{php include $this->template('hotel_msg')}

<script type="text/javascript">
    $(function () {
        $("#data_form").ajaxForm();

        var Rooms = 1;
        var price = {$price};
        var sum = 0;
        var max_room = {$max_room};

        $(".list_num_inc").click(function () {
            if (Rooms < max_room) {
                Rooms++;
                if (Rooms == max_room){
                    $("#show_room_num").show();
                }
                resetRooms();
            }
        });
        $(".list_num_dec").click(function () {
            if (Rooms > 1) {
                Rooms--;
                resetRooms();
            }
        });
        $(".cui-select-option").click(function(){
            $(".cui-select-option").removeClass("cui-option-current");
            var obj = $(this);
            obj.addClass("cui-option-current");
            $("#paytype").val(obj.attr("data-value"));
            $("#paytype_name").html(obj.attr("data-name"));
            $("#paytype_div").hide();
            
        });
        $(".cui-select-close").click(function(){
            $("#paytype_div").hide();
        })
        {if !empty($this->_set_info['paytype1']) || !empty($this->_set_info['paytype2'])}
             $("#btn_paytype").click(function(){
               $("#paytype_div").show();     
             });
        {/if}

        loadRooms();

        function loadRooms() {
            if (max_room == 1) {
                $("#show_room_num").show();
                resetRooms();
            }
        }

        function resetRooms() {
            var c = ".list_num_dec", a = "num_invalid", b = ".list_num_inc";
            $(b).removeClass(a);
            $(c).addClass(a);
            $(".list_num").html(Rooms);
            $("#nums").val(Rooms);
            sum = Rooms*price;
            $("#price").html(sum);

            if (max_room > 1) {
                if (Rooms == 1) {
                    $(c).addClass(a);
                    $(b).removeClass(a)
                } else if (Rooms == max_room) {
                    $(c).removeClass(a);
                    $(b).addClass(a)
                } else {
                    $(c).removeClass(a);
                    $(b).removeClass(a)
                }
            } else {
                $(b).addClass(a);
                $(c).addClass(a);
            }
        }

        $("#data_submit").click(function(){
            if ($.trim($("#uname").val()) == '') {
                show_msg("请填写入住人", 2000);
                $("#uname").focus();
                return false;
            }

            if ($.trim($("#contact_name").val()) == '') {
                show_msg("请填写联系人", 2000);
                $("#contact_name").focus();
                return false;
            }
            var str =$.trim($("#mobile").val());
            var isMobile = $.trim(str) !== '' && /^1[3|4|5|8][0-9]\d{4,8}$/.test($.trim(str));
            if (!isMobile) {
                show_msg("请填写正确的手机号", 2000);
                $("#mobile").focus();
                return false;
            }

           if($("#paytype").val()==''){
                 show_msg("请选择支付方式!", 2000);
                 return false;
           }

            $("#button").hide();
            $("#orderAlert").show();

            show_loading();

            $("#data_form").ajaxSubmit({
                success:function(data){
                    data  =eval("(" + data +")");
                    hide_loading();
                    if(data.result==1){
                        show_msg("预定订单提交成功!", 2000);
                        setTimeout(function(){location.href = data.url;},2000);
                    }
                    else{
                        $("#button").show();
                        $("#orderAlert").hide();
                        show_msg(data.error, 2000);
                        return false;
                    }
                }
            });
        });

        $("#payBtn").click(function () {
            show_msg("登录名和密码不能为空", 2000);
        });
    });
</script>

{template 'share'}

</body>
</html>